<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="padding: 0">
        <div class="title-list">
          <p>订单信息:</p>
          <div v-if="list.status == 0">待处理</div>
          <div v-else-if="list.status == 1">退货中</div>
          <div v-else-if="list.status == 2">已完成</div>
          <div v-else-if="list.status == 3">已拒绝</div>
        </div>
      </div>
      <div slot="header" class="clearfix">
        <el-row :gutter="20">
          <el-col
            :span="6"
          ><span>订单编号:</span><span>{{ list.orderSn }}</span></el-col>
          <el-col
            :span="3"
          ><span
            style="color: blue"
            @click="pathxq"
          >查看订单详情</span></el-col>
          <el-col
            :span="5"
          ><span>退单人姓名:</span><span>{{ list.returnName }}</span></el-col>
          <el-col
            :span="5"
          ><span>退单理由:</span><span>{{ list.reason }}</span></el-col>
          <el-col
            :span="5"
          ><span>退单描述:</span><span>{{ list.description }}</span></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col
            :span="6"
          ><span>申请时间:</span><span>{{ list.createTime }}</span></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="3"><span>退单图片:</span></el-col>
          <el-col :span="15">
            <div class="demo-image__preview">
              <el-image
                v-for="(item, index) in list.productPic"
                :key="index"
                style="width: 100px; height: 100px"
                :src="item"
                :preview-src-list="list.productPic"
              />
            </div>
          </el-col>
        </el-row>
      </div>
      <div slot="header" class="clearfix">
        <p>退货商品:</p>
        <el-table :data="inblist" border style="width: 100%">
          <el-table-column prop="productPic" label="商品图片" width="180">
            <template slot-scope="scope">
              <img
                :src="scope.row.productPic"
                alt=""
                style="width: 100px; height: 100px"
              >
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品描述" width="180" />
          <el-table-column prop="productPrice" label="商品价格" />
          <el-table-column prop="productAttr" label="商品属性">
            <template slot-scope="scope">
              <span
                v-for="(item, index) in scope.row.productAttr"
              >{{ item.key }}:{{ item.value }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="productQuantity" label="商品数量" />
          <el-table-column prop="totalPrice" label="总计" />
        </el-table>
      </div>
      <div slot="header" class="clearfix">
        <p>用户信息:</p>
        <el-row :gutter="20">
          <el-col
            :span="6"
          ><span>联系人:</span><span>{{ list.returnName }}</span></el-col>
          <el-col
            :span="6"
          ><span>联系电话:</span><span>{{ list.returnPhone }}</span></el-col>
        </el-row>
      </div>
      <div slot="header" class="clearfix">
        <p>费用信息:</p>
        <el-row :gutter="20">
          <el-col
            :span="6"
          ><span>退单金额:</span><span>{{ list.productRealPrice }}</span></el-col>
          <el-col
            :span="6"
          ><span>运费金额:</span><span style="color: red">0</span></el-col>
        </el-row>
      </div>

      <div v-show="list.status >= 1" slot="header" class="clearfix">
        <p>处理结果:</p>
        <el-row :gutter="20">
          <el-col
            :span="6"
          ><span>处理人:</span><span>{{ list.handleMan }}</span></el-col>
          <el-col
            :span="6"
          ><span>处理备注:</span><span>{{ list.handleNote }}</span></el-col>
          <el-col
            :span="10"
          ><span>处理时间:</span><span>{{ list.handleTime }}</span></el-col>
        </el-row>
      </div>
      <div v-show="list.status >= 2" slot="header" class="clearfix">
        <p>收货信息:</p>
        <el-row :gutter="20">
          <el-col
            :span="6"
          ><span>退单收货人:</span><span>{{ list.returnName }}</span></el-col>
          <el-col
            :span="6"
          ><span>退单收货备注:</span><span>{{ list.receiveNote }}</span></el-col>
          <el-col
            :span="10"
          ><span>退单收货时间:</span><span>{{ list.receiveTime }}</span></el-col>
        </el-row>
      </div>
      <div v-if="list.status == 1">
        <el-form ref="ruleForm" :model="isruleForm" class="demo-form-inline">
          <div style="display:flex;">
            <el-form-item label="收货人" style="margin-right:100px;">
              <el-input v-model="isruleForm.receiveMan" style="width:150px" />
            </el-form-item> <el-form-item label="收货备注">
              <el-input v-model="isruleForm.receiveNote" style="width:150px" />
            </el-form-item>
          </div>
        </el-form>
        <div style="width:200px;height:40px; margin:0 auto;"> <el-button type="primary" style="margin:0 auto;" @click="coodok">确认收货</el-button></div>
      </div>
      <!-- :rules="rules"
        ref="ruleForm" -->
      <div v-show="list.status < 1" slot="header" class="clearfix">
        <el-form :model="ruleForm" class="demo-form-inline">
          <el-row :gutter="20">
            <el-col
              :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="退款金额">
                <el-input-number
                  v-model="ruleForm.returnAmount"
                  :min="0"
                  :max="999999"
                  label="描述文字"
                />
              </el-form-item></div></el-col>
            <el-col
              :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="审批人" prop="name">
                <el-input
                  v-model="ruleForm.handleMan"
                  placeholder="审批人"
                />
              </el-form-item></div></el-col>
            <el-col
              :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="备注" prop="region">
                <el-input
                  v-model="ruleForm.handleNote"
                  placeholder="备注"
                />
              </el-form-item></div></el-col>
          </el-row>
          <el-form-item label="">
            <el-row :gutter="20">
              <el-col
                :span="6"
                :offset="6"
              ><div class="grid-content bg-purple">
                <el-button
                  type="primary"
                  @click="submitForm()"
                >同意退货</el-button>
                <el-button
                  type="primary"
                  @click="refuse()"
                >拒绝退货</el-button>
              </div></el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script >
import {
  orderReturn,
  orderDetail,
  agreeApply,
  rejectApply,
  receiveProduct,
  addreceiveProduct
} from '@/api/order/index'
export default {
  components: {},
  data() {
    return {
      list: {},
      inblist: [],
      ruleForm: {
        id: '',
        handleMan: '',
        handleNote: '',
        returnAmount: ''
      },
      isruleForm: {
        id: '',
        receiveMan: '',
        receiveNote: ''
      },
      start: 0
      // rules: {
      //     name: [
      //       { required: true, message: '请输入信息', trigger: 'blur' },
      //       { min: 1, max: 9, message: '超过限制', trigger: 'blur' }
      //     ],
      //     region: [
      //       { required: true, message: '请输入信息', trigger: 'change' }
      //     ]},
    }
  },

  computed: {},
  created() {
    var _this = this
    orderReturn(this.$route.query.id).then((res) => {
      console.log(res)
      if (res.success) {
        res.data.orderReturnApply.productPic = res.data.orderReturnApply.productPic.split(
          ','
        )
        console.log(res.data.orderReturnApply.productPic)
        _this.list = res.data.orderReturnApply
        _this.inblist.push(res.data.orderReturnApply)
      } else {
        _this.$message.success('查询失败请重试')
      }
    })
    // orderDetail(this.$route.query.orderId).then((res) => {
    //   console.log(res, '15641654165')
    //   if (res.success) {
    //     res.data.orderDetail.orderItems.forEach((ele) => {
    //       ele.productAttr = JSON.parse(ele.productAttr)
    //     })
    //     _this.start = res.data.orderDetail.orderBase.status
    //     _this.inblist = res.data.orderDetail.orderItems
    //   }
    // })
  },

  mounted() {},

  methods: {
    // 去人收货
    coodok() {
      this.isruleForm.id = this.$route.query.id
      addreceiveProduct(this.$route.query.id, this.isruleForm).then(res => {
        console.log(res)
        if (res.success) {
          this.$message.success('更新成功')
          this.$router.go(0)
        }
      })
    },
    // 同意退货
    submitForm() {
      var _this = this
      this.ruleForm.id = this.$route.query.id
      agreeApply(this.list.id, this.ruleForm).then((res) => {
        console.log(res)
        if (res.success) {
          _this.$message.success('退货成功')
          window.reload()
        }
      })
    },
    // 拒绝退货
    refuse() {
      var _this = this
      this.ruleForm.id = this.$route.query.id
      rejectApply(this.list.id, this.ruleForm).then((res) => {
        if (res.success) {
          console.log(res)
          _this.$message.success('拒绝退款成功')
        }
      })
    },
    //   详情跳转
    pathxq() {
      this.$router.push({
        path: '/order/orderxq',
        query: { id: this.$route.query.orderId }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.box-card {
  margin: 30px;
}
.title-list {
  display: flex;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 20px;
  p {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 20px;
  }
  div {
    width: 66px;
    height: 24px;
    padding: 0 8px;
    margin: 15px 0;
    line-height: 22px;
    background: #f9f9f9;
  }
}
.clearfix {
  padding: 30px 0;
  border-bottom: 3px solid #f9f9f9;
}
</style>
